<template>
  <div class="big_div">
    <!-- 第一行 -->
    <div class="line1">
      <div class="line1_1">
        <!-- 曲线图标题 -->
        <div class="linetitle">体重趋势</div>
        <!-- 曲线图 -->
        <div id="lineimg1" style="width: 500px; height: 450px"></div>
      </div>
      <!-- 表格标题 -->
      <div class="line1_1">
        <div class="linetitle">体重记录</div>
        <!-- 表格 -->
        <div class="line1_table">
          <el-table
            :data="tableData"
            stripe
            style="width: 550px"
            :header-cell-style="{
              background: 'silver',
              color: '#606266',
              height: '50px',
            }"
          >
            <el-table-column
              prop="date"
              label="测量时间"
              width="130"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="number"
              label="数值（kg）"
              width="90"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="assess"
              label="评估"
              width="70"
              align="center"
            >
              <!-- 用插槽的方法来改变颜色! -->
              <template>
                <div :style="{ color: '正常' ? 'green' : 'green' }">正常</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="dataResource"
              label="数据来源"
              width="100"
              align="center"
            >
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              width="130"
              align="center"
            >
              <template>
                <el-button type="text" size="small"
                  ><font style="color: blue">编辑</font></el-button
                >
                <el-button type="text" size="small"
                  ><font style="color: red">删除</font></el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="line1">
      <div class="line1_1">
        <!-- 曲线图标题 -->
        <div class="linetitle">
          血糖趋势&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-switch
            class="btn1"
            v-model="value1"
            active-text="餐后"
            inactive-text="餐前"
          >
          </el-switch>
        </div>
        <!-- 曲线图 -->
        <div id="lineimg2" style="width: 500px; height: 450px"></div>
      </div>
      <div class="line1_1">
        <!-- 第二行表格标题 -->
        <div class="linetitle">
          血糖记录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-switch
            class="btn1"
            v-model="value1"
            active-text="餐后"
            inactive-text="餐前"
          >
          </el-switch>
        </div>
        <!-- 第二行表格 -->
        <!-- 表格 -->
        <div class="line1_table">
          <el-table
            :data="tableData2"
            stripe
            style="width: 550px"
            :header-cell-style="{
              background: 'silver',
              color: '#606266',
              height: '50px',
            }"
          >
            <el-table-column
              prop="date"
              label="测量时间"
              width="130"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="number"
              label="数值（kg）"
              width="90"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="assess"
              label="评估"
              width="70"
              align="center"
            >
              <!-- 用插槽的方法来改变颜色! -->
              <template>
                <div :style="{ color: '偏高' ? 'red' : 'red' }">偏高</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="dataResource"
              label="数据来源"
              width="100"
              align="center"
            >
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              width="130"
              align="center"
            >
              <template>
                <el-button type="text" size="small"
                  ><font style="color: blue">编辑</font></el-button
                >
                <el-button type="text" size="small"
                  ><font style="color: red">删除</font></el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 第三行 -->
    <div class="line1">
      <div class="line1_1">
        <!-- 曲线图标题 -->
        <div class="linetitle">血压趋势</div>
        <!-- 曲线图 -->
        <div id="lineimg3" style="width: 500px; height: 450px"></div>
      </div>
      <!-- 表格标题 -->
      <div class="line1_1">
        <div class="linetitle">体重记录</div>
        <!-- 表格 -->
        <div class="line1_table">
          <el-table
            :data="tableData"
            stripe
            style="width: 550px"
            :header-cell-style="{
              background: 'silver',
              color: '#606266',
              height: '50px',
            }"
          >
            <el-table-column
              prop="date"
              label="测量时间"
              width="130"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="number"
              label="数值（mmHg）"
              width="90"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="assess"
              label="评估"
              width="70"
              align="center"
            >
              <!-- 用插槽的方法来改变颜色! -->
              <template>
                <div :style="{ color: '正常' ? 'green' : 'green' }">正常</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="dataResource"
              label="数据来源"
              width="100"
              align="center"
            >
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              width="130"
              align="center"
            >
              <template>
                <el-button type="text" size="small"
                  ><font style="color: blue">编辑</font></el-button
                >
                <el-button type="text" size="small"
                  ><font style="color: red">删除</font></el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 第四行 -->
    <div class="line1">
      <div class="line1_1">
        <!-- 曲线图标题 -->
        <div class="linetitle">体重趋势</div>
        <!-- 曲线图 -->
        <div id="lineimg4" style="width: 500px; height: 450px"></div>
      </div>
      <!-- 表格标题 -->
      <div class="line1_1">
        <div class="linetitle">体重记录</div>
        <!-- 表格 -->
        <div class="line1_table">
          <el-table
            :data="tableData"
            stripe
            style="width: 550px"
            :header-cell-style="{
              background: 'silver',
              color: '#606266',
              height: '50px',
            }"
          >
            <el-table-column
              prop="date"
              label="测量时间"
              width="130"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="number"
              label="数值（bmp）"
              width="90"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="assess"
              label="评估"
              width="70"
              align="center"
            >
              <!-- 用插槽的方法来改变颜色! -->
              <template>
                <div :style="{ color: '正常' ? 'green' : 'green' }">正常</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="dataResource"
              label="数据来源"
              width="100"
              align="center"
            >
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              width="130"
              align="center"
            >
              <template>
                <el-button type="text" size="small"
                  ><font style="color: blue">编辑</font></el-button
                >
                <el-button type="text" size="small"
                  ><font style="color: red">删除</font></el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!--  -->
      <!-- 最下边按钮div -->
      <div class="btn_bottom2">
        <el-row class="btn">
          <el-button type="primary">添加健康记录</el-button>
           &nbsp;&nbsp;&nbsp;&nbsp;
          <el-button>返回</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      // 第一行第一个表格
      tableData: [
        {
          date: "2021/05/09 10:45",
          number: "49.2",
          assess: "正常",
          dataResource: "用户记录",
        },
        {
          date: "2021/05/09 10:45",
          number: "49.2",
          assess: "正常",
          dataResource: "用户记录",
        },
        {
          date: "2021/05/09 10:45",
          number: "49.2",
          assess: "正常",
          dataResource: "用户记录",
        },
        {
          date: "2021/05/09 10:45",
          number: "49.2",
          assess: "正常",
          dataResource: "用户记录",
        },
        {
          date: "2021/05/09 10:45",
          number: "49.2",
          assess: "正常",
          dataResource: "用户记录",
        },
        {
          date: "2021/05/09 10:45",
          number: "49.2",
          assess: "正常",
          dataResource: "用户记录",
        },
        {
          date: "2021/05/09 10:45",
          number: "49.2",
          assess: "正常",
          dataResource: "用户记录",
        },
      ],
      //   血糖趋势 第二个echars 开关按钮
      value1: true,
      //第二行第一个表格
      tableData2: [
        {
          date: "2021/05/09 10:45",
          number: "4.2",
          assess: "偏高",
          dataResource: "用户记录",
        },
        {
          date: "2021/05/09 10:45",
          number: "4.2",
          assess: "偏高",
          dataResource: "用户记录",
        },
        {
          date: "2021/05/09 10:45",
          number: "4.2",
          assess: "偏高",
          dataResource: "用户记录",
        },
        {
          date: "2021/05/09 10:45",
          number: "4.2",
          assess: "偏高",
          dataResource: "用户记录",
        },
        {
          date: "2021/05/09 10:45",
          number: "4.2",
          assess: "偏高",
          dataResource: "用户记录",
        },
        {
          date: "2021/05/09 10:45",
          number: "4.2",
          assess: "偏高",
          dataResource: "用户记录",
        },
        {
          date: "2021/05/09 10:45",
          number: "4.2",
          assess: "偏高",
          dataResource: "用户记录",
        },
      ],
    };
  },
  mounted() {
    //   第一行第一个echarts图
    var chartDom = document.getElementById("lineimg1");
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      xAxis: {
        type: "category",
        data: ["1/4", "1/24", "1/31", "2/4", "2/14", "2/18", "3/1"],
      },
      yAxis: {
        type: "value",
        axisLine: {
          show: false, //隐藏y轴
        },
        axisTick: {
          show: false, //刻度线
        },
        name: "单位：kg",
        nameTextStyle: {
          color: "#aaa",
          fontSize: 15,
        },
        min: 45,
        max: 60,
      },

      series: [
        {
          data: [
            49.0,
            49.5,
            50.0,
            52.0,
            56.0,
            54.0,
            {
              value: 52.0,
              itemStyle: {
                normal: {
                  color: "#ff0000",
                  symbolSize: 10, //设定实心点的大小
                },
              },
            },
          ],
          itemStyle: {
            normal: {
              color: "#1877F2",
              label: { show: true },
            },
          },
          symbolSize: 10, //设定实心点的大小
          type: "line",
          smooth: true,
        },
      ],
    };
    option && myChart.setOption(option);

    //   第二行第一个echarts图
    var chartDom = document.getElementById("lineimg2");
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      xAxis: {
        type: "category",
        data: ["1/4", "1/24", "1/31", "2/4", "2/14", "2/18", "3/1"],
      },
      yAxis: {
        type: "value",
        axisLine: {
          show: false, //隐藏y轴
        },
        axisTick: {
          show: false, //刻度线
        },
        name: "             单位：mmol/L",
        nameTextStyle: {
          color: "#aaa",
          fontSize: 15,
        },
        min: 3,
        max: 7,
      },

      series: [
        {
          data: [
            4.0,
            4.5,
            5.0,
            5.5,
            6.0,
            5.8,
            {
              value: 5.0,
              itemStyle: {
                normal: {
                  color: "#ff0000",
                  symbolSize: 10, //设定实心点的大小
                },
              },
            },
          ],
          itemStyle: {
            normal: {
              color: "#1877F2",
              label: { show: true },
            },
          },
          symbolSize: 10, //设定实心点的大小
          type: "line",
          smooth: true,
        },
      ],
    };

    option && myChart.setOption(option);

    // 第三行echarts
    var chartDom = document.getElementById("lineimg3");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["收缩压", "舒张压"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["1/4", "1/24", "1/31", "2/4", "2/14", "2/18", "3/1"],
      },
      yAxis: {
        axisLine: {
          show: false, //隐藏y轴
        },
        axisTick: {
          show: false, //刻度线
        },
        name: "             单位：mmHg",
        nameTextStyle: {
          color: "#aaa",
          fontSize: 15,
        },
        min: 60,
        max: 140,
      },
      series: [
        {
          data: [
            92,
            110,
            110,
            118,
            139,
            125,
            {
              value: 109,
              itemStyle: {
                normal: {
                  color: "#ff0000",
                  symbolSize: 10, //设定实心点的大小
                },
              },
            },
          ],
          itemStyle: {
            normal: {
              color: "#3DD4A7",
              label: { show: true },
            },
          },
          name: "收缩压",
          symbolSize: 10, //设定实心点的大小
          type: "line",
          smooth: true,
        },
        {
          data: [
            90,
            100,
            90,
            80,
            70,
            80,
            {
              value: 98,
              itemStyle: {
                normal: {
                  color: "#ff0000",
                  symbolSize: 10, //设定实心点的大小
                },
              },
            },
          ],
          itemStyle: {
            normal: {
              color: "#efd545",
              label: { show: true },
            },
          },
          name: "舒张压",
          symbolSize: 10, //设定实心点的大小
          type: "line",
          smooth: true,
        },
      ],
    };

    option && myChart.setOption(option);

    //   第一行第一个echarts图
    var chartDom = document.getElementById("lineimg4");
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      xAxis: {
        type: "category",
        data: ["1/4", "1/24", "1/31", "2/4", "2/14", "2/18", "3/1"],
      },
      yAxis: {
        type: "value",
        axisLine: {
          show: false, //隐藏y轴
        },
        axisTick: {
          show: false, //刻度线
        },
        name: "单位：kg",
        nameTextStyle: {
          color: "#aaa",
          fontSize: 15,
        },
        min: 45,
        max: 60,
      },

      series: [
        {
          data: [
            49.0,
            49.5,
            50.0,
            52.0,
            56.0,
            54.0,
            {
              value: 52.0,
              itemStyle: {
                normal: {
                  color: "#ff0000",
                  symbolSize: 10, //设定实心点的大小
                },
              },
            },
          ],
          itemStyle: {
            normal: {
              color: "#ff0000",
              label: { show: true },
            },
          },
          symbolSize: 10, //设定实心点的大小
          type: "line",
          smooth: true,
        },
      ],
    };
    option && myChart.setOption(option);
  },
};
</script>

<style>
.big_div {
  width: 1150px;
  height: 2100px;
  background-color: #ffffff;
}
.line1 {
  width: 1100px;
  height: 500px;
  /* background-color: antiquewhite; */
  margin: auto;
}
.line1_1 {
  float: left;
  height: 20px;
  width: 500px;
  /* background-color: aquamarine; */
}
.linetitle {
  margin: 10px 30px;
  float: left;
  font-size: 18px;
  height: 20px;
  width: 500px;
  /* background-color: pink; */
}
.line1_table {
  margin-left: 30px;
  margin-top: 60px;
  width: 530px;
  height: 400px;
}
#lineimg1 {
  margin-top: 30px;
  width: 530px;
  height: 400px;
}
#lineimg2 {
  margin-top: 30px;
  width: 530px;
  height: 400px;
}
#lineimg3 {
  margin-top: 30px;
  width: 530px;
  height: 400px;
}
#lineimg4 {
  margin-top: 30px;
  width: 530px;
  height: 400px;
}

.btn_bottom2 {
  width: 600px;
  height: 50px;
  /* background-color: blueviolet; */
  margin-left: 20px;
  margin-top: 450px;
  float: left;
}
.btn2 {
  margin-left: 10px;
  float: left;
}
</style>